<template>
	<div id="detailAll" v-if="ready">
		<div>
			<div id="detailLeft">
				<img id="contextImg" v-if="detailInfo.pic" :src="ip+'/'+detailInfo.pic" />
				<div id="title">{{detailInfo.title}}</div>
				<overview :info="detailInfo" :attentionInfo="isAttention" @attentionOver="attentionOver"></overview>
				<div id="context" v-html="detailInfo.html"></div>
				<like v-if="detailInfo._id" :info="detailInfo"></like>
				<div id="comment">
					<commentInput :info='detailInfo._id' :commentSum='detailInfo.comment' @newComment="newComment"></commentInput>
					<commentTitle :info='commentInfo.length' @changeArrangeMent="changeArrangeMent"></commentTitle>
					<div id="commentContent">
						<commentBox v-for="t in commentInfo" :key='t._id' :info='t'></commentBox>
					</div>
				</div>
			</div>
		</div>
		<div id="detailRight">
			<writer :info="detailInfo" :attentionInfo="isAttention" @attentionOver="attentionOver"></writer>
		</div>
	</div>
</template>

<script>
	import overview from './detail/overview.vue'
	import commentInput from './detail/commentInput.vue'
	import commentTitle from './detail/commentTitle.vue'
	import commentBox from './detail/commentBox.vue'
	import writer from './detail/writer.vue'
	import like from './detail/like.vue'
	export default {
		data() {
			return {
				detailInfo: {},
				commentInfo: [],
				arrangement: -1,
				isAttention: false,
				ready: false
			}
		},
		components: {
			overview,
			commentInput,
			commentTitle,
			commentBox,
			writer,
			like
		},
		props: ['info'],
		mounted() {
			this.$axios({
				url: this.ip + '/postGet',
				method: 'post',
				data: {
					postID: this.$props.info
				}
			}).then(res => {
				console.log('postInfo', res.data.info)
				this.detailInfo = res.data.info[0]
				this.$axios({
					url: this.ip + '/isAttention',
					method: 'post',
					data: {
						userID: this.$storage.get('user').id,
						attentionID: this.detailInfo.userID._id
					}
				}).then(res => {
					console.log(res.data.result)
					this.ready = true
					if(res.data.result == null) {
						this.isAttention = false
					}else{
						this.isAttention = true
					}
				})
			})
			this.refresh()
		},
		methods: {
			attentionOver(){
				this.isAttention = true
			},
			newComment() {
				// 资助金触发刷新评论列表函数
				this.refresh()
			},
			changeArrangeMent() {
				this.arrangement = this.arrangement * -1
				this.refresh()
			},
			// 刷新评论表
			refresh() {
				this.$axios({
					url: this.ip + '/commentListGet',
					method: 'post',
					data: {
						postID: this.$props.info,
						arrangement: this.arrangement
					}
				}).then(res => {
					// console.log('commentInfo', res.data.info)
					this.commentInfo = res.data.info
				})
			}
		}
	}
</script>

<style>
	#detailAll {
		width: 960px;
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 16px;
	}

	#detailAll #detailLeft {
		width: 640px;
		margin-top: 16px;
		background-color: #FFFFFF;
		box-shadow: 2px 2px 5px rgba(32, 32, 32, .3);
		border-radius: 8px;
		padding-bottom: 16px;
	}

	#detailAll #detailLeft #contextImg {
		margin: 16px 16px 0;
		border-radius: 8px;
		width: calc(640px - 32px);
	}

	#detailAll #detailLeft #title,
	#detailAll #detailLeft #writerInfo {
		width: calc(100% - 32px);
		padding: 0 16px;
	}

	#detailAll #detailLeft #title {
		font-size: 24px;
		font-weight: bold;
		line-height: 56px;
	}

	#detailAll #detailLeft #context {
		width: calc(100% -32px);
		padding: 8px 16px;
	}

	#detailAll #detailRight {
		width: 304px;
	}
</style>
